/**
 * Password组件
 * @class Password
 * @extends Basic
 *
 *
 * @param {function} onFocus 获取焦点时触发
 * @param {function} onKeyUp keyup时触发
 * @param {function} onBlur 失去焦点时触发
 *
 * 示例:
 *
 *     @example
 *     var password = new UDM({});
 *     <Password dmbind={password.dmbind} placeholder="default" id="name" ref="ddd" value="333" onChange={this.onchange}/>
 *
 *
 */
var Password = React.createClass({
    getDefaultProps:function(){
        return{
            "id":"",
            "value":"",
            "className":"",
            "dmbind":"",
            "placeholder":"请输入密码",
            "onkeypress":"",
            onFocus:function(){}
        }
    },
    _getNode:function(nid){
        var _nodes = document.getElementsByTagName('div'),
            _getNode;
        for(var i in _nodes){
            if(_nodes[i].refs == nid){
                _getNode = _nodes[i];
            }
        }
        return _getNode;
    },
    _onFocus:function (e) {
        var _nodeInput = e.target || e.srcElement,
            _nodeSpan = _nodeInput.nextSibling;
        if(_nodeSpan.className == "ucs-placeholder"){
            _nodeSpan.className = "ucs-placeholder hide";
        }
        this.props.onFocus && this.props.onFocus();
    },
    _handle:function(e){
        var _nodeSpan = e.target || e.srcElement,
            _node = _nodeSpan.parentNode,
            _nodeInput = _node.firstChild;
        if(_nodeSpan.className == "ucs-placeholder"){
            _nodeSpan.className = "ucs-placeholder hide";
        }
        _nodeInput.focus();
    },
    _placeholder:function(_this){
        if (!('placeholder' in document.createElement('input'))){
            return (
                <span className="ucs-placeholder" onClick={_this._handle}>{_this.props.placeholder}</span>
            );
        }else{
            return "";
        }
    },
    _onBlur:function(e){
        if (!('placeholder' in document.createElement('input'))){
            var _nodeInput = e.target || e.srcElement,
                _node = _nodeInput.parentNode,
                _nodeSpan = _node.lastChild;
            if(!_nodeInput.value){
                _nodeSpan.className = "ucs-placeholder";
            }
        }
        this.props.onBlur && this.props.onBlur();
    },
    render:function(){
        var _this = this;
        var GiraffeObjectManager = window.GiraffObjectManager;
        var MaxLength = GiraffeObjectManager[this.props.dmbind].maxLength;
        if (MaxLength == undefined) {
            return (
                <div className="ucs-input-control">
                    <input id={this.props.id}
                           className={"ucs-password " + this.props.className}
                           type='password'
                           value={this.props.value}
                           dmbind={this.props.dmbind}
                           placeholder={this.props.placeholder}
                           onkeypress={this.props.onKeyPress}
                           onkeyup={this.props.onKeyUp}
                           onfocus={this._onFocus.bind(this)}
                           onblur={this._onBlur.bind(this)}/>
                    {this._placeholder(this)}
                </div>
            )

        } else {
            return (
                <div className="ucs-input-control">
                    <input
                        id={this.props.id}
                        maxLength={MaxLength}
                        className={"ucs-password " + this.props.className}
                        type='password'
                        value={this.props.value}
                        dmbind={this.props.dmbind}
                        placeholder={this.props.placeholder}
                        onkeypress={this.props.onKeyPress}
                        onkeyup={this.props.onKeyUp}
                        onfocus={this._onFocus.bind(this)}
                        onblur={this._onBlur.bind(this)}/>
                    {this._placeholder(_this)}
                </div>
            )
        }
    }
});

module.exports = Password;